<template>
  <div style="padding: 20px">
    <el-card class="box-card">
      <el-form :label-position="labelPosition" label-width="22%" :model="formLabelAlign">
        <br/>
        <div class="text">添加新的商品</div>
        <br/>
        <el-form-item label="商品名">
          <el-input v-model="formLabelAlign.productName"></el-input>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input v-model="formLabelAlign.productPrice"></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="formLabelAlign.typeName"></el-input>
        </el-form-item>
        <el-form-item label="库存">
          <el-input v-model="formLabelAlign.stock"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="formLabelAlign.introduction"></el-input>
        </el-form-item>
        <el-form-item label="商品规格、参数">
          <el-input v-model="formLabelAlign.specifications"></el-input>
        </el-form-item>
        <el-form-item label="商品图片链接">
          <el-input v-model="formLabelAlign.image"></el-input>
        </el-form-item>
        <el-form-item label="上传商品图片">
          <div style="height:70px;">
            <input ref="clearFile" type="file" multiple="multiplt" accept=".jpg,.png,.gif" @change="getFile($event)">
            <span class="add-file-right-more">支持扩展名：.jpg .png .gif </span>
          </div>
          <div class="add-file-list">
            <ul>
              <li v-for="(item, index) in image" :key="index"><a>{{ item.name }}</a></li>
            </ul>
          </div>

        </el-form-item>
        <el-form-item label="是否上架">
          <el-select v-model="formLabelAlign.onShow">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="upload">添加</el-button>
          <el-button >取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data() {
      return {
        labelPosition: 'left',
        image: [],
        // fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
        formLabelAlign: {
        }
      };
    },
    methods:{

      upload: function() {
        let addproduct={
          productName: this.formLabelAlign.productName,
          productPrice: this.formLabelAlign.productPrice,
          typeName: this.formLabelAlign.typeName,
          stock: this.formLabelAlign.stock,
          introduction: this.formLabelAlign.introduction,
          specifications: this.formLabelAlign.specifications,
          image: this.formLabelAlign.image,
          onShow: this.formLabelAlign.onShow
        }
        this.$axios({
          headers:{
            "Content-Type": "application/json"
          },
          method:"post",
          url:"http://localhost:8080/api/product/addproduct",
          data: {
            productName:addproduct.productName,
            productPrice:addproduct.productPrice,
            typeName: addproduct.typeName,
            stock:addproduct.stock,
            introduction:addproduct.introduction,
            specifications:addproduct.specifications,
            image:addproduct.image,
            onShow:addproduct.onShow,
          }
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
          }else if(res.data.resultCode==="2"){
            this.$message({
              message: '无此类型，请先添加类型',
              type: 'success'
            });
          }
        })
      },
      getFile: function(event) {
        var file = event.target.files
        for (var i = 0; i < file.length; i++) {
          //    上传类型判断
          var imgName = file[i].name
          var idx = imgName.lastIndexOf('.')
          if (idx !== -1) {
            var ext = imgName.substr(idx + 1).toUpperCase()
            ext = ext.toLowerCase()
            if (ext !== 'png' && ext !== 'jpg' && ext !== 'gif') {

            } else {
              this.image.push(file[i])
              this.upimage()
            }
          } else {

          }
        }
      },
      upimage:function(){
        const form =new FormData()
        form.append('image',this.image[0])
        this.$axios({
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          method: 'POST',
          url: 'http://localhost:8080/api/product/uploadimage',
          data: form
        }).then((res)=>{
          if(res.data.resultCode==="0"){
            this.formLabelAlign.image=res.data.proImage
            this.$message({
              message: '上传成功'+res.data.proImage,
              type: 'success'
            });
          }else {
            this.$message({
              message: '失败',
              type: 'success'
            });
          }
        })
      },

      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      }
    }
  }
</script>

<style scoped>
  .text {
    font-size: 30px;
    line-height: 46px;
    text-align: center;
  }
  .box-card {
    width: 700px;
    margin-left: 8%;
  }
</style>

